<template>
  <div class="unpayPresented">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">
      未结账赠送查询
      <a v-if="loadingStatus" slot="right" >刷新中...</a>
      <a v-else slot="right" @click="refreshTable({load:true,mess:true})" >刷新页面</a>
    </x-header>
    <div class="topHolder"></div>
    <x-table :cell-bordered="false">
      <thead>
      <tr style="background-color: #F7F7F7">
        <th>菜品名称/赠送时间</th>
        <th width="22%">赠送数量</th>
        <th width="32%">赠送金额</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,index) in unpayedPrsentList" :key="index">
        <td>{{item.NAME}}<br/>{{item.REQUEST_DATETIME}}</td>
        <td v-text="item.QUANTITY"></td>
        <td v-text="'¥ ' + formatCurrency(item.PRICE) + '元'"></td>
      </tr>
      <tr v-if="unpayedPrsentList.length <= 0">
        <td colspan="3">
          <div class="listNoItem">暂无未结账的赠送</div>
        </td>
      </tr>
      <tr>
        <td>合计：</td>
        <td><span v-text="total"></span> </td>
        <td><span v-text="'¥ ' + formatCurrency(countUp) + '元'"></span> </td>
      </tr>
      </tbody>
    </x-table>
    <br/>
  </div>
</template>

<script>
  import {Box, PopupPicker, XButton, ButtonTab, ButtonTabItem, XTable, numberComma } from 'vux'
  import {getUnpayedPresent} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'unpayPresented',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:true,
        countUp:0,
        total:0
      }
    },
    components:{
      Box,
      PopupPicker,
      XButton,
      ButtonTab,
      ButtonTabItem,
      XTable
    },
    computed:{
      unpayedPrsentList:{
        get(){
          return this.$store.getters.getUnpayedPresentList
        },
        set(value){
          this.$store.commit('updateUnpayedPresentList',value)
        }
      }
    },
    methods:{
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      refreshTable(params){
        this.loadingStatus = true
        if(params.load){
          this.countUp = 0
          this.total = 0
          getUnpayedPresent('all').then((res)=>{
            if(res.status == 'success'){
              this.unpayedPrsentList = res.data
              for(let item of this.unpayedPrsentList){
                this.countUp = this.countUp + item.PRICE
                this.total = this.total + item.QUANTITY
              }
              if(params && params.mess)message({message:'刷新页面成功',type:'info'})
            }else if(res.status == 'error') {
              message({message:res.msg,type:'error'})
              console.log('getUnpayedPresent error info:', res.msg)
            }
            this.loadingStatus = false
            if(params && params.callback && typeof params.callback == 'function')params.callback()
          }).catch((err)=>{console.log('getUnpayedPresent catch info:',err)})
        }else{
          for(let item of this.unpayedPrsentList){
            this.countUp = this.countUp + item.PRICE
            this.total = this.total + item.QUANTITY
          }
          this.loadingStatus = false
          if(params && params.callback && typeof params.callback == 'function')params.callback()
        }
      }
    },
    mounted(){
      this.refreshTable({load:this.unpayedPrsentList.length > 0?false:true,callback:()=>{
          this.$store.commit('updateLoadingStatus',{isLoading:false})
        }})
    }
  }
</script>

<style lang="scss" scoped>
  .unpayPresented{
    .filterArea{
      display: flex;justify-content: space-between;
    }
  }
</style>
